<!-- 词云 -->
<template>
  <div :id="props.id" style="width: 100%;height: 100%"></div>
</template>

<script setup lang="ts" name="HzEchartsWordCloud">
import 'echarts-wordcloud';
import * as echarts from 'echarts';
// @ts-ignore
import {defineProps, defineExpose, onMounted} from 'vue';
// @ts-ignore
import {getEchartsTheme} from "/@utils/GlobalFunction.ts";
import {loadEchartsData} from "/@api/hz-bigscreen-api";

const props = defineProps({
  id: {
    type: String,
    default: 'pie-simple'
  },
  showTitle: {
    type: Boolean,
    default: true
  },
  showLegend: {
    type: Boolean,
    default: true
  },
  showTooltip: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: '基础词云'
  },
  data:{
    type:Array,
    default:()=>{
      return [
        {name: '词云1',value: 1000},
        {name: '词云2',value: 1000},
        {name: '词云3',value: 1000},
        {name: '词云4',value: 1000},
        {name: '词云5',value: 1000},
        {name: '词云6',value: 1000},
        {name: '词云7',value: 1000},
        {name: '词云8',value: 1000},
        {name: '词云9',value: 1000},
        {name: '词云10',value: 1000},
        {name: '词云11',value: 1000},
        {name: '词云12',value: 1000},
        {name: '词云13',value: 1000},
        {name: '词云14',value: 1000},
        {name: '词云15',value: 1000},
        {name: '词云16',value: 1000},
        {name: '词云17',value: 1000},
        {name: '词云18',value: 1000},
        {name: '词云19',value: 1000},
        {name: '词云20',value: 1000},
      ]
    }
  },
  apiPath: { // api路径
    type: String,
    default: ''
  },
  chartsType: { // 图表类型
    type: String,
    default: 'wordCloud'
  },
  methodType: {
    type: String, // 请求方式
    default: 'get'
  }
});

const option = {
  backgroundColor: "rgba(0,0,0,0)",
  title: {
    text: props.title,
    left: 'center',
    textStyle: {
      color: '#fff'
    },
    show: props.showTitle
  },
  tooltip: {
    show: true
  },
  series: [
    {
      type: 'wordCloud',
      // shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
      shape: 'circle',
      // 这个功能还没用过
      keepAspect: false,
      // 这个是可以自定义背景图片的，词云会按照图片的形状排布，所以有形状限制的时候，最好用背景图来实现，而且，这个背景图一定要放base64的，不然词云画不出来
      // maskImage: maskImage,
      // 下面就是位置的配置
      left: 'center',
      top: 'center',
      width: '100%',
      height: '100%',
      right: null,
      bottom: null,
      // 词的大小，最小12px，最大60px，可以在这个范围调整词的大小
      sizeRange: [12, 60],
      // 每个词旋转的角度范围和旋转的步进
      rotationRange: [-90, 90],
      rotationStep: 45,
      // 词间距，数值越小，间距越小，这里间距太小的话，会出现大词把小词套住的情况，比如一个大的口字，中间会有比较大的空隙，这时候他会把一些很小的字放在口字里面，这样的话，鼠标就无法选中里面的那个小字，这里可以用函数根据词云的数量动态返回间距
      gridSize: 8,
      // 允许词太大的时候，超出画布的范围
      drawOutOfBound: false,
      // 布局的时候是否有动画
      layoutAnimation: true,
      // 这是全局的文字样式，相对应的还可以对每个词设置字体样式
      textStyle: {
        fontFamily: 'sans-serif',
        fontWeight: 'bold',
        // 颜色可以用一个函数来返回字符串，这里是随机色
        color: function () {
          // Random color
          return 'rgb(' + [
            Math.round(Math.random() * 160),
            Math.round(Math.random() * 160),
            Math.round(Math.random() * 160)
          ].join(',') + ')';
        }
      },
      emphasis: {
        focus: 'self',
        textStyle: {
          textShadowBlur: 10,
          textShadowColor: '#333'
        }
      },
      data: props.data
    }
  ]
};

onMounted(() => {
  init()
});

const basicBar = ref();

function init() {
  basicBar.value = markRaw(echarts.init(document.getElementById(props.id), getEchartsTheme));
  basicBar.value.setOption(option);
  window.addEventListener('resize', () => {
    basicBar.value.resize();
  });
}

// 刷新图表方式，该方法需要提供给外部调用
// eslint-disable-next-line no-unused-vars
const refreshCharts = (data:any) => {
  option.series[0].data = data.data;
  option.title.text = data.title;
  const basicBar = echarts.init(document.getElementById(props.id), getEchartsTheme());
  basicBar.setOption(option);
};
// 刷新图表  根据apiPath，method，type query获取数据
const refreshChartsByApi = async (query : any) => {
  // 如果query中没有封装type则给query添加type属性
  if (!query.hasOwnProperty('chart_type')) {
    query.chart_type = props.chartsType
  }
  const s = await loadEchartsData(props.apiPath, props.methodType, query)
  refreshCharts(s.data)
}

// 重置图表大小
const resizeEcharts = () => {
  basicBar.value.resize();
}

// eslint-disable-next-line no-undef
defineExpose({
  refreshCharts,
  resizeEcharts,
  refreshChartsByApi
});

</script>

<style scoped>

</style>